import { Space, Button, Table, Image, Popconfirm, message } from 'antd'
import { useState, useEffect } from 'react'
import { getBannerList, deleteBanner } from './../../api/banner'
import { connect } from 'react-redux'
import { getAdminDetail } from './../../api/admin'
import { formatArr, getMenu, checkPathName } from './../../layout/main/components/tool'
import routes from './../../router/menus'
import { useLocation } from 'react-router-dom'
const Com = (props) => {
  const { pathname } = useLocation()
  const [newRoute, setNewRoute] = useState([])
  const [checkedKeys, setCheckedKeys] = useState([])
  useEffect(() => {
    getAdminDetail({ adminname: props.adminname }).then(res => {
      setCheckedKeys(res.data[0].checkedKeys)
      const newChexkedKeys = formatArr(checkedKeys)
      setNewRoute(props.adminname === 'admin' ? routes : getMenu(routes, newChexkedKeys))
    })
  }, [props.adminname,checkedKeys])
  const columns = [
    {
      title: '序号',
      render(text, record, index) {
        // console.log()
        return <span>{count + index + 1}</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      render(text, record, index) {
        return <Image src={text} width={200} />
      }
    },
    {
      title: '链接',
      dataIndex: 'link'
    },
    {
      title: '提示',
      dataIndex: 'alt'
    },
    {
      title: '操作',
      render(text, record, index) {
        return (
          <Popconfirm
            title="确定删除吗?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => {
              deleteBanner({ bannerid: record.bannerid }).then(res => {
                getBannerList().then(res => {
                  setBannerList(res.data)
                })
              })
            }}
            onCancel={() => { }}
          >
            <Button danger>删除</Button>
          </Popconfirm>
        )
      }
    }
  ]
  const [bannerList, setBannerList] = useState([])
  const [count, setcount] = useState(0)
  useEffect(() => {
    getBannerList().then(res => {
      setBannerList(res.data)
    })
  }, [])
  const onChange = (pagination) => {
    console.log(pagination)
    setcount((pagination.current - 1) * pagination.pageSize)
    getBannerList().then(res => {
      setBannerList(res.data)
    })
  }
  // const changePageSize = () => {
  //   console.log(1)
  // }
  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Button
        type="primary"
        style={{ marginBottom: '10px' }}
        onClick={() => {
          checkPathName(newRoute, pathname, [])
          ? props.history.push('/banner/add')
          : message.error('无权限')
        }}
      >
        添加轮播图
      </Button>
      <Table
        dataSource={bannerList}
        columns={columns}
        rowKey="bannerid"
        scroll={{ y: 370 }}
        onChange={onChange}
        pagination={{ pageSize: 10, showSizeChanger: false }}
      />
    </Space>
  )
}
export default connect((state) => {
  return {
    adminname: state.getIn(['user', 'adminname'])
  }
})(Com)